<!doctype html>
<html lang="en">

<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>Canvas 变换</title>
	<style>
		body {
			background: #666;
			display: flex;
			flex-direction: column;
			align-items: center;
		}

		canvas {
			background: #fff;
		}

		a {
			color: #fff;
			font-size: 24px;
		}
	</style>
</head>

<body>
	<div>
		<h1>变换</h1>
		<canvas id="canvas1" width="500" height="500"></canvas>
		<script>
			let oCanvas = document.getElementById('canvas1');
			let ctx = oCanvas.getContext('2d'); //拿到画笔

			let draw = () => {
				ctx.clearRect(0, 0, 500, 500)

				// 变换
				ctx.rotate(0.5 * Math.PI / 180)
				// 弧度 = 角度 * Math.PI / 180
				// 角度 = 180 * 弧度 / Math.PI

				ctx.fillStyle = 'red'
				ctx.fillRect(10, 10, 50, 50)
				ctx.fillStyle = 'green'
				ctx.fillRect(440, 10, 50, 50)

				ctx.beginPath()
				ctx.moveTo(10, 10)
				ctx.lineTo(490, 10)
				ctx.stroke()
				ctx.closePath()

				requestAnimationFrame(draw)
			}
			ctx.translate(250, 250)
			draw()

			// draw = () => {
			// 	ctx.clearRect(-250, -250, 500, 500)

			// 	// 变换
			// 	ctx.rotate(0.2 * Math.PI / 180)
			// 	// 弧度 = 角度 * Math.PI / 180
			// 	// 角度 = 180 * 弧度 / Math.PI

			// 	// ctx.scale(.98, .98)
			// 	ctx.transform(
			// 		1, 0,
			// 		0, 1,
			// 		0, 0
			// 	);
			// 	// ctx.transform(
			// 	//       m1_1, m1_2, 水平缩放: 默认 1 	水平倾斜: 默认 0
			// 	//       m2_1, m2_2, 垂直倾斜: 默认 0 	垂直缩放: 默认 1
			// 	//       dx, dy      水平移动: 默认 0  垂直移动: 默认 0
			// 	//   )

			// 	ctx.fillStyle = 'red'
			// 	ctx.fillRect(10 - 250, 10, 50, 50)
			// 	ctx.fillStyle = 'green'
			// 	ctx.fillRect(440 - 250, 10, 50, 50)

			// 	ctx.beginPath()
			// 	ctx.moveTo(10 - 250, 10)
			// 	ctx.lineTo(490 - 250, 10)
			// 	ctx.stroke()
			// 	ctx.closePath()

			// 	requestAnimationFrame(draw)
			// }

			// let angle = 0;

			// let img = new Image();
			// img.src = '/assets/img/avatar.jpg';

			// const draw = () => {
			// 	angle++;
			// 	ctx.clearRect(0, 0, 500, 500);

			// 	ctx.save(); // 保存当前状态（原坐标位置，旋转角度，画笔颜色等）
			// 	ctx.translate(250, 250);

			// 	// 变换
			// 	ctx.rotate((angle * Math.PI) / 180);
			// 	// 弧度 = 角度 * Math.PI / 180
			// 	// 角度 = 180 * 弧度 / Math.PI

			// 	// 绘制图形 img
			// 	ctx.drawImage(img, 0, 0, img.width, img.height, -img.width / 2, -img.height / 2, img.width, img.height);

			// 	ctx.restore();

			// 	requestAnimationFrame(draw);
			// };

			// draw();
		</script>
	</div>
</body>

</html>